<template>
  <view class="address-container">
    <!-- 地址列表 -->
    <view class="address-list" v-if="!isEditing">
      <view 
        v-for="address of addresses" 
        :key="address.id"
        class="address-item animate__animated animate__fadeIn"
      >
        <view class="address-content" @tap="selectAddress(address)">
          <view class="user-info">
            <text class="name">{{ address.name }}</text>
            <text class="phone">{{ address.phone }}</text>
            <text v-if="address.isDefault" class="default-tag">默认</text>
          </view>
          <text class="address">
            {{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail }}
          </text>
        </view>
        <view class="actions">
          <button class="btn-edit" @tap="editAddress(address)">
            <text class="bi bi-pencil"></text>
            编辑
          </button>
          <button class="btn-delete" @tap="deleteAddress(address)">
            <text class="bi bi-trash"></text>
            删除
          </button>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="!addresses.length">
        <text class="bi bi-geo-alt"></text>
        <text>暂无收货地址{{ addresses }}</text>
      </view>
    </view>

    <!-- 编辑表单 -->
    <view class="edit-form" v-else>
      <view class="form">
        <view class="form-item">
          <view class="label-wrapper">
            <text class="bi bi-person"></text>
            <text class="label">收货人</text>
          </view>
          <input 
            v-model="form.name"
            type="text"
            placeholder="请输入收货人姓名"
            class="input"
          />
        </view>
        
        <view class="form-item">
          <view class="label-wrapper">
            <text class="bi bi-phone"></text>
            <text class="label">手机号码</text>
          </view>
          <input 
            v-model="form.phone"
            type="number"
            maxlength="11"
            placeholder="请输入手机号码"
            class="input"
          />
        </view>
        
        <view class="form-item">
          <view class="label-wrapper">
            <text class="bi bi-geo-alt"></text>
            <text class="label">所在地区</text>
          </view>
          <picker 
            mode="region" 
            :value="[form.province, form.city, form.district]"
            @change="handleRegionChange"
            class="picker"
          >
            <view class="picker-value">
              <text v-if="!form.province" class="placeholder">请选择所在地区</text>
              <text v-else>{{ form.province }} {{ form.city }} {{ form.district }}</text>
              <text class="bi bi-chevron-right arrow"></text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <view class="label-wrapper">
            <text class="bi bi-house-door"></text>
            <text class="label">详细地址</text>
          </view>
          <textarea
            v-model="form.detail"
            placeholder="请输入详细地址，如街道、门牌号等"
            class="textarea"
          />
        </view>
        
        <view class="form-item switch-item">
          <view class="label-wrapper">
            <text class="bi bi-star"></text>
            <text class="label">设为默认地址</text>
          </view>
          <switch 
            :checked="form.isDefault"
            @change="handleDefaultChange"
            color="var(--td-brand-color)"
          />
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <template v-if="!isEditing">
        <button class="btn-add" @tap="startAdd">
          <text class="bi bi-plus"></text>
          新增收货地址
        </button>
      </template>
      <template v-else>
        <view class="btn-group">
          <button class="btn-cancel" @tap="cancelEdit">取消</button>
          <button class="btn-save" @tap="saveAddress">保存</button>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/userStore'

const userStore = useUserStore()
const addresses = computed(() => userStore.userInfo.addresses || [])


const isEditing = ref(false)
const form = ref({
  id: null,
  name: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  detail: '',
  isDefault: false
})

// 开始添加
const startAdd = () => {
  form.value = {
    id: null,
    name: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    detail: '',
    isDefault: false
  }
  isEditing.value = true
}

// 编辑地址
const editAddress = (address) => {
  form.value = { ...address }
  isEditing.value = true
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
  form.value = {
    id: null,
    name: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    detail: '',
    isDefault: false
  }
}

// 删除地址
const deleteAddress = (address) => {
  uni.showModal({
    title: '删除地址',
    content: '确定要删除该地址吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.deleteAddress(address.id)
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
      }
    }
  })
}

// 选择地区
const handleRegionChange = (e) => {
  const [province, city, district] = e.detail.value
  form.value.province = province
  form.value.city = city
  form.value.district = district
}

// 设置默认
const handleDefaultChange = (e) => {
  form.value.isDefault = e.detail.value
}

// 保存地址
const saveAddress = () => {
  // 表单验证
  if (!form.value.name) {
    return uni.showToast({
      title: '请输入收货人姓名',
      icon: 'none'
    })
  }
  if (!/^1\d{10}$/.test(form.value.phone)) {
    return uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    })
  }
  if (!form.value.province) {
    return uni.showToast({
      title: '请选择所在地区',
      icon: 'none'
    })
  }
  if (!form.value.detail) {
    return uni.showToast({
      title: '请输入详细地址',
      icon: 'none'
    })
  }

  if (form.value.id) {
    // 编辑模式
    userStore.updateAddress(form.value)
  } else {
    // 新增模式
    userStore.addAddress(form.value)
  }

  uni.showToast({
    title: '保存成功',
    icon: 'success'
  })
  
  isEditing.value = false
  form.value = {
    id: null,
    name: '',
    phone: '',
    province: '',
    city: '',
    district: '',
    detail: '',
    isDefault: false
  }
}

// 选择地址
const selectAddress = (address) => {
  const pages = getCurrentPages()
  const prevPage = pages[pages.length - 2]
  if (prevPage && prevPage.route.includes('order')) {
    uni.setStorageSync('selectedAddress', address)
    uni.navigateBack()
  }
}
</script>

<style lang="scss" scoped>
.address-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.address-item {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.address-content {
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  
  .name {
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 20rpx;
  }
  
  .phone {
    font-size: 28rpx;
    color: #666;
  }
  
  .default-tag {
    margin-left: 20rpx;
    font-size: 24rpx;
    color: var(--td-brand-color);
    border: 2rpx solid var(--td-brand-color);
    padding: 4rpx 10rpx;
    border-radius: 20rpx;
  }
}

.address {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding-top: 20rpx;
  border-top: 2rpx solid #f5f5f5;
}

.btn-edit,
.btn-delete {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  background: none;
  border: none;
  padding: 10rpx 20rpx;
  
  .bi {
    margin-right: 10rpx;
  }
}

.btn-edit {
  color: #666;
}

.btn-delete {
  color: #ff4d4f;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80rpx;
  background: var(--td-brand-color);
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  
  .bi {
    margin-right: 10rpx;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  
  .bi {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }
}

.btn-group {
  display: flex;
  gap: 20rpx;
}

.btn-cancel,
.btn-save {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.btn-cancel {
  background: #f5f5f5;
  color: #666;
}

.btn-save {
  background: var(--td-brand-color);
  color: #fff;
}

.edit-form {
  background: #fff;
  min-height: calc(100vh - 120rpx);
}

.form {
  background: #fff;
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
  margin: 20rpx;
}

.form-item {
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.label-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  
  .bi {
    font-size: 32rpx;
    color: var(--td-brand-color);
    margin-right: 12rpx;
  }
  
  .label {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
}

.input {
  width: 100%;
  height: 80rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
  
  &::placeholder {
    color: #999;
  }
}

.picker-value {
  width: 100%;
  height: 80rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  
  .placeholder {
    color: #999;
  }
  
  .arrow {
    color: #999;
    font-size: 24rpx;
  }
}

.textarea {
  width: 100%;
  height: 160rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 24rpx;
  font-size: 28rpx;
  color: #333;
  
  &::placeholder {
    color: #999;
  }
}

.switch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0;
  
  .label-wrapper {
    margin-bottom: 0;
  }
}

/* 按钮样式优化 */
.btn-group {
  padding: 30rpx;
  gap: 30rpx;
}

.btn-cancel,
.btn-save {
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  font-weight: 500;
  transition: opacity 0.2s;
  
  &:active {
    opacity: 0.8;
  }
}

.btn-save {
  background: var(--td-brand-color);
  box-shadow: 0 8rpx 16rpx rgba(152, 31, 35, 0.2);
}
</style> 